<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @import url(http://fonts.useso.com/css?family=Russo+One&subset=latin,cyrillic);
        BODY {
            background: #00293d;
        }
        svg {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .circle {
            opacity: 0;
            -webkit-animation: opacity 3s infinite linear;
            animation: opacity 3s infinite linear;
        }
        .circle:nth-child(5n + 1) {
            -webkit-animation-delay: -2.4s;
            animation-delay: -2.4s;
        }
        .circle:nth-child(5n + 2) {
            -webkit-animation-delay: -1.8s;
            animation-delay: -1.8s;
        }
        .circle:nth-child(5n + 3) {
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }
        .circle:nth-child(5n + 4) {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
        .circle:nth-child(5n + 5) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }
        @-webkit-keyframes opacity {
            50% {
                opacity: 1;
            }
        }
        @keyframes opacity {
            50% {
                opacity: 1;
            }
        }
        .text {
            text-align: center;
            font: 32vmax/1 Impact;
            font-family: 'Russo One', sans-serif;
        }
        .u-in-mask {
            fill: #fff;
        }
        .r-fill {
            -webkit-animation: move 3s infinite linear;
            animation: move 3s infinite linear;
        }
        @-webkit-keyframes move {
            100% {
                -webkit-transform: translate(0, -100px);
                transform: translate(0, -100px);
            }
        }
        @keyframes move {
            100% {
                -webkit-transform: translate(0, -100px);
                transform: translate(0, -100px);
            }
        }
        .u-stroke {
            fill: transparent;
            stroke: rgba(0, 17, 26, 0.5);
            stroke-width: 10;
        }
    </style>
</head>
<body>
<svg>

    <radialGradient id="gr-light" gradientUnits="objectBoundingBox" cx="50%" cy="50%" r="60%">
        <stop stop-color="skyblue" offset="0%" />
        <stop stop-color="transparent" offset="100%" />
    </radialGradient>

    <symbol id="chain">
        <g fill="url(#gr-light)" stroke="hsla(220,100%,50%,.15)" stroke-width="3">
            <circle r="7" cx="10" cy="9" class="circle" />
            <circle r="5" cx="10" cy="33" class="circle" />
            <circle r="3" cx="10" cy="55" class="circle" />
            <circle r="1.5" cx="10" cy="73" class="circle" />
            <circle r="1.3" cx="10" cy="90" class="circle" />
        </g>
    </symbol>

    <symbol id="s-text">
        <text x="50%" y="60%" text-anchor="middle" letter-spacing="8" class="text">
            WoW
        </text>
    </symbol>

    <pattern id="p-circles" viewBox="0 0 50 100" patternUnits="userSpaceOnUse" width="50" height="100">

        <rect width="100%" height="100%" />

        <g fill="url(#gr-light)" stroke="hsla(220,100%,50%,.2)" stroke-width="2">
            <g>
                <circle r="7" cx="10" cy="9" class="circle" />
                <circle r="5" cx="10" cy="33" class="circle" />
                <circle r="3" cx="10" cy="55" class="circle" />
                <circle r="1.5" cx="10" cy="73" class="circle" />
                <circle r="1.3" cx="10" cy="90" class="circle" />
            </g>

            <g class="group-2" transform="translate(25,50)">
                <circle r="7" cx="10" cy="9" class="circle" />
                <circle r="5" cx="10" cy="33" class="circle" />
                <circle r="3" cx="10" cy="55" class="circle" />
                <circle r="1.5" cx="10" cy="73" class="circle" />
                <circle r="1.3" cx="10" cy="90" class="circle" />
            </g>
            <g class="group-3" transform="translate(25,-50)">
                <circle r="7" cx="10" cy="9" class="circle" />
                <circle r="5" cx="10" cy="33" class="circle" />
                <circle r="3" cx="10" cy="55" class="circle" />
                <circle r="1.5" cx="10" cy="73" class="circle" />
                <circle r="1.3" cx="10" cy="90" class="circle" />
            </g>
        </g>
    </pattern>

    <mask id="m-text" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse">
        <use xlink:href="#s-text" class="u-in-mask" />
    </mask>

    <use xlink:href="#s-text" class="u-stroke" />

    <g mask="url(#m-text)">
        <rect width="100%" height="100%" fill="url(#p-circles)" class="r-fill" />
    </g>
</svg>
</body>
</html>